<!DOCTYPE html>
<html>
<head>
     <title>ARE YOU HUNGRY</title>
     <link rel="stylesheet"type="text/css" href="css/style.css">
     <meta charset="UTF-8">
     <script src="./js/app.js"></script>
      <style>
        .title-logon-user{
            height: 50px;
            line-height: 50px;
            background-color: rgb(199,228,255);
            border: 1px solid black;
            border-radius: 5px;
            padding-left: 15px;
            position: relative;
            cursor: pointer;
        }
        .title-logon-user>p{
          margin: 0;
          padding: 0;
         
        }
        .in-select{
          position: absolute;
          left: 10px;
          top: 40px;
        }
        .out-img-pic{
          width: 1100px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          margin-bottom: 100px;
        }
        .out-img-pic>img{
          margin-top: 10px;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            cursor: pointer;
        }
        p{
            margin: 0;
            padding: 0;
        }
        .flex{
            display: flex;
        }
        .title-logo{
            justify-content: space-around;
        }
        .title-word{
            font-size: 35px;
        }
        .out-class{
            background-color: #ddd;
            /* width: 100%; */
            position: absolute;
            top: 27px;
            left: -95px;
            z-index: 999;
        }
       
        .out-class>li{
            margin-left: 100px;
            width: 200px;
        }
        .in-ul>li{
            margin-top: 20px;
            font-size: 18px;
            display: block;
        }
        .title-img{
            position: relative;
        }
      </style>
</head>
<body>
    <header>
        <!-- navigation top-->

        <div class="home">
            <div class="logo">
                <img src="logo.png">
            </div>
            <ul  style="margin-right: 65px;">
                <li class="active"><a href="#">Home</a></li>
                <li style="position:relative" id="onmouse"><a>Restaurant</a>
                  <ul style="float: none;" class="flex out-class show1" >
                    <li>
                        <span class="title-word">sort by</span>  
                        <ul style="float: none;" class="in-ul" >
                            <li  class="typeClick" >all</li>
                            <li class="typeClick">barkety</li>
                            <li class="typeClick">cate</li>
                            <li class="typeClick">fast food</li>
                        </ul>
                    </li>
                    <li>
                       <span class="title-word">drinks</span> 
                        <ul style="float: none;" class="in-ul">
                            <li class="typeClick">mike tea</li>
                            <li class="typeClick">frappe</li>
                        </ul>
                    </li>
                </ul>
                </li>
                <li><a href="#">Location</a></li>
                <li><a href="#">Hungry App</a></li>
                <li><a href="logreg.html">Account</a></li>
                <li class="title-logon-user"><p style=" width: 160px;">
                  <img src="./images/profile.jpg" width="30" height="30" alt="">
                  <span id="userName-show">chen yang</span>
                </p>
                <div class="in-select">
                    <h4 id="updatePassword">修改密码</h4>
                    <h4 id="logout-btn">退出</h4>
                </div>
              </li>
            </ul>
        </div>
        <div>
            <!-- end nav -->

          <!-- to slide the image -->
          <div class='mySlides fade' >
              <div style='width:1100px;height:500px;margin: 0 auto;padding-top: 130px;  margin-bottom: 100px;'>
                  <div class="out-img-pic">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                  </div>
              </div>
              <div class='text'> </div>    
            </div>
            <div class='mySlides fade' >
              <div style='width:1100px;height:500px;margin: 0 auto;padding-top: 130px;   margin-bottom: 100px;'>
                  <div class="out-img-pic">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                  </div>
              </div>
              <div class='text'> </div>    
            </div>

            <div class='mySlides fade' >
              <div style='width:1100px;height:500px;margin: 0 auto;padding-top: 130px;   margin-bottom: 100px;'>
                  <div class="out-img-pic">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                      <img src="./images/pizza.jpg" width="350" height="300" alt="">
                  </div>
              </div>
              <div class='text'> </div>    
            </div>

               
          <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>
          <script>
              var slideIndex = 1;
              showSlides(slideIndex);
              
              function plusSlides(n) {
                showSlides(slideIndex += n);
              }
              
              function currentSlide(n) {
                showSlides(slideIndex = n);
              }
              
              function showSlides(n) {
                var i;
                var slides = document.getElementsByClassName("mySlides");
                var dots = document.getElementsByClassName("dot");
                if (n > slides.length) {slideIndex = 1}    
                if (n < 1) {slideIndex = slides.length}
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";  
                }
                for (i = 0; i < dots.length; i++) {
                    dots[i].className = dots[i].className.replace(" active", "");
                }
                slides[slideIndex-1].style.display = "block";  
                dots[slideIndex-1].className += " active";
              }
              </script>
        </div>
    </header>
    <br><br><br><br><br> <br><br>
  <!-- end slide -->

  <!-- clickable image -->

  <input type="image" src="./images/pstan.png" style='margin-left:140px;width:1000px;height:250px'>
  <br><br><br><br><br>
  <input type="image" src='./images/grab.jpg'style='margin-left:140px;width:1000px;height:250px'>
  


  <!-- footer -->
  <br><br><br><br><br><br><br><br>

  
<div class="footer">
  <div class="contain">
  <div class="col">
    <h1>About</h1>
    <ul>
        <li><a href="ourstory.html">Our Story</a></li>
      <li>Sustainability</li>
      <li><a href="about.html">Our Founder</a></li>
    </ul>
  </div>
  <div class="col">
    <h1>Services</h1>
    <ul>
        <li><a href="contact.html">Contact Us</a></li>
        <li>Delivery</li>
      <li>Ordering & Payment</li>
      <li>FAQ</li>
      

    </ul>
  </div>

  <div class="col">
    <h1>Polices</h1>
      <li>Privacy Policy</li>
      <li>Term of Use</li>
    </ul>
  </div>

  <div class="col">
    <h1>      </h1>
    <ul>
      <li>Feedback</li>
    </ul>
  </div>
  <div class="col social">
    <h1>Social</h1>
    <ul>
      <li><img src="./images/ins.png" width="32" style="width: 32px;"></li>
      <li><img src="./images/twi.jpg" width="32" style="width: 32px;"></li>
      <li><img src="./images/fb.png" width="32" style="width: 32px;"></li>
    </ul>
  </div>
<div class="clearfix"></div>
</div>
</div>
<!-- END OF FOOTER -->
<script src="./api/axios.min.js"></script>
<script src="./api/publicinfo.js"></script>
<script src="./js/jquery.js"></script>
<script src="./api/utils.js"></script>
    <script>
        $(".in-select").hide()
        $(".title-logon-user").mouseenter(function(){
          console.log("122")
          $(".in-select").show()
        })
        .mouseleave(function(){
          $(".in-select").hide()
        })
    
    
    </script>
     
    <script>
        console.log(getLocalStorage("userName"))
        if(getLocalStorage("userName")){
          $(".title-logon-user").show()
          $("#userName-show").text(getLocalStorage("userName"))
        }else{
          $(".title-logon-user").hide()
        }

        $("#logout-btn").click(function(){
          delLocalStorage("userName")
          window.location = "logreg.html"
        })
        $("#updatePassword").click(function(){
          window.location = "edituser.html"
        })
        $(".show1").hide()
        $("#onmouse").mouseenter(function(){
          $(".show1").show()
        })

        $(".show1").mouseenter(function(){
          $(".show1").show()
        }).mouseleave(function(){
          $(".show1").hide()
        })
        $("#entryR").click(function(){
          window.location = "allres.html" 
        })
        $(".typeClick").click(function(e){
          console.log(e.target.innerHTML)
          window.location = `allres.html?food=${e.target.innerHTML}`
         
        })
    </script>
</body>
</html>